import React, { Component } from 'react'
import { Carousel,Grid } from 'antd-mobile';
import { getindexHandle } from '../api'
import {withRouter} from 'react-router-dom'
export class Home extends Component {
  state = {
    imgHeight: 176,
    carouselList:[], //轮播图
    patternmakingList: [],//商品静态展示图
    productlist:[]//精选商品列表
  }
    //获取首页轮播图
    async getindexHandle () {
      let res = await getindexHandle({})
      res.data1.map(v => v.adv_code='https://wap.meishangyun.com'+v.adv_code )
      res.data2.map(v => {
        v.icon = 'https://wap.meishangyun.com' + v.adv_code
        v.text=v.adv_title
      } )
      res.data_goods.map(v => {
        v.goods_image = 'https://wap.meishangyun.com/uploads/home/store/goods/' + v.goods_image
      } )
      this.setState({
        carouselList:res.data1 ,//轮播图
        patternmakingList: res.data2, //商品展示图
        productlist:res.data_goods
      })
      console.log(res,'获取首页轮播图')
  }
    // 获取精选商品详情信息
     jumpProductDetail = (item) => {
        this.props.history.push(`/goodsDetails/${item.goods_id}`)
        console.log(item,'获取精选商品详情信息')
      }
      componentDidMount() {
      this.getindexHandle() //列表
  }
  render() {
    return (
      <div>
        {/* 轮播图 */}
         <Carousel
          autoplay
          infinite
        >
          {this.state.carouselList.map((val,index) => (
            <div
              key={index}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.adv_code}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </div>
          ))}
        </Carousel>
        {/* 商品展示图片 */}
        <div className="sub-title">商品展示</div>
        <Grid data={this.state.patternmakingList}
          columnNum={2}
            renderItem={dataItem => (
              <div style={{ padding: '5px'}}>
                <img src={dataItem.icon} style={{ width: '100%'}} alt="" />
              </div>
            )}
        />
        {/* 精选商品 */}
      <div className="sub-title">精选商品</div>
        <div className="proList">
          {this.state.productlist.map(v=>(
            <div key={v.goods_id} className="pro" onClick={()=>{this.jumpProductDetail(v)}}>
              <img src={v.goods_image} alt=""/>
            <div className="title">{ v.goods_name }</div>
            <div className="price">￥{ v.goods_price }</div>
          </div>
          ))}
        </div>
        <style jsx>{`
          .sub-title{
            font-size:20px;
            padding:5px;
          }
          .proList {
            display: flex;
            flex-wrap: wrap;
            .pro {
              width: 47%;
              margin: 2% 0 0% 2%;
              background: #fff;
              image {
                width: 100%;
              }
              .title {
                padding: 0 6px;
                overflow: hidden;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
              }
              .price {
                padding:6px 6px 6px;
                color: #ff6482;
              }
            }
          }
          `}</style>
      </div>
    )
  }

}
// 使用withRouter方法包裹Home组件，目的是为了让Home组件能够获取到路由对象的属性
export default withRouter(Home)